上一讲我们掌握了项目中静态资源的使用方法，并整合的样式库 Tailwindcss。要快速构建视图，我们还需要引入一个组件库。我估计大家应该挺烦每次使用组件时的各种导入和注册操作，这点 Nuxt3 早就解决了，组件用就完了！而且不仅仅是组件，项目中的复用逻辑 composables，工具方法 utils 等都会自动导入，这可以有效提升开发体验。

下面我们就来体验一下 Nuxt3 丝滑的自动导入功能！

# Nuxt 自动导入特性

Nuxt3 中会处理以下依赖的自动导入。

• Nuxt 自动导入：数据访问 useFetch、状态管理 useState、App 上下文 useNuxtApp、运行时配置 useRuntimeConfig 等等。
• Vue自动导入：ref、reactive、computed 等等。
• 基于路径自动导入：
  • 组件目录：/components ；
  • hooks目录：/composables ；
  • 工具库目录：/utils 。

# 组件自动导入

Nuxt 中约定把组件放在components/目录中，这些组件只要被用在页面或其他组件中，就会自动导入并注册。

创建 components/Navbar.vue：

css
复制代码<template>
  <nav
    class="border-b border-slate-200 px-5 py-2 flex items-center justify-between"
  >
    <h1 class="text-2xl font-bold">Nuxt3 in Action</h1>
    <img
      class="w-[50px] border-[1px] border-slate-300 rounded-full inline-block"
      src="~/assets/avatar.png"
      alt="avatar"
    />
  </nav>
</template>

下面就可以直接使用了，layouts/default.vue:

xml
复制代码<template>
  <div>
    <Navbar></Navbar>
    <slot />
  </div>
</template>

# 组件名称约定

没有嵌套的组件会以文件名直接导入，但如果存在嵌套关系呢？例如下面的路径：

diff
复制代码| components/
--| base/
----| foo/
------| Button.vue

那么组件名称将会基于路径和文件名以大驼峰方式连起来，比如上面的base/foo/Button.vue注册名称将会是BaseFooButton，用起来将会像下面这样：

xm